<template>
	<div class="nav-list">
		<a href="#" class="nav-list-logo">
			<img src="../../assets/logo.png" class="nav-list-img">
		</a>
		<nav class="nav-list-main">
			<ul>
				<li><router-link to="/base/home" class="nav-list-main-a">首页</router-link></li>
				<li><router-link to="/base/personCenter/myInfo" class="nav-list-main-a">个人中心</router-link></li>
				<li><router-link to="/base/activity" class="nav-list-main-a">活动报名中心</router-link></li>
				<li><router-link to="/base/news/opinions" class="nav-list-main-a">咨询天地</router-link></li>
				<li><router-link to="/base/email_list" class="nav-list-main-a">情感信箱</router-link></li>
				<li><router-link to="/base/vip" class="nav-list-main-a">VIP</router-link></li>
			</ul>
		</nav>
	</div>
</template>

<script>
export default {
  	name: 'nav',
  	data () {
    	return {
    	}
  	},
}
</script>

<style scoped>
	.nav-list {
		width: 100%;
		height: 60px;
		box-shadow: 0 0 2px rgba(0,0,0,0.25);
	}
	.nav-list-logo {
		line-height: 60px;
		margin-left: 20px;
		display: inline-block;
	}
	.nav-list-img {
		width: 80px;
		height: 40px;
		vertical-align: middle;
	}
	.nav-list-main {
		float: right;
		
	}
	.nav-list-main ul {
		margin: 0;
	}
	.nav-list-main ul li{
		float: left;
		list-style: none;
		margin-right: 30px;
		line-height: 60px;
	}
	.nav-list-main-a {
		color: #000000;
	}
	.router-link-active {
		color: #f85377;
	}
</style>